<template>
	<view>
		<!-- #ifdef MP -->
		<!-- 搜索框在小程序中显示 -->
		<search-input @click.native="navTos"></search-input>
		<!-- #endif -->

		<!-- 头部轮播 -->
		<mxg-banner :bannerList="bannerList"></mxg-banner>
		<!-- 分类块 ( 展示排名前7的)，2行4列，8块，最后一块`全部分类` -->
		<category-box :categoryList="categoryList"></category-box>

		<!-- 热门推荐、近期上新、免费精选 、猜你喜欢、 -->
		<view class="list-container">
			<swiper-course name="热门推荐" word="HOT" :courseData="hotCourseList">
			</swiper-course>
			<scroll-course name="近期上新" word="NEW" :courseData="newCourseList">
			</scroll-course>
			<swiper-course name="免费精选" word="FREE" :courseData="freeCourseList">
			</swiper-course>
			<list-course name="付费精品" word="NICE" :courseData="payCourseList">
			</list-course>
		</view>

	</view>
</template>
<script>
	// 接口api相关
	import api from '@/api/course.js'
	// 搜索框组件
	import searchInput from '@/components/common/search-input.vue'
	// 头部轮播
	import mxgBanner from '@/components/common/mxg-banner.vue'
	// 分类区
	import categoryBox from './components/category-box.vue'
	// 热门推荐 左右切换课程
	import swiperCourse from "./components/swiper-course.vue"
	// 左右滚动课程
	import scrollCourse from './components/scroll-course.vue'
	// 付费精品 +++
	import listCourse from './components/list-course.vue'

	export default {
		components: {
			searchInput,
			mxgBanner,
			categoryBox,
			swiperCourse,
			scrollCourse,
			listCourse
		},
		data() {
			return {
				bannerList: [], //广告信息
				categoryList: [], //分类信息
				hotCourseList: [], //热门推荐信息
				newCourseList: [], //近期上新信息
				freeCourseList: [], //免费精选信息
				payCourseList: [], //付费精品信息
			}
		},
		onLoad() {
			this.loadBannerData()
			this.loadCateData()
			this.loadHotCourseData()
			this.loadNewCourseData()
			this.loadFreeCourseData()
			this.loadPayCourseData()
		},
		// 监听原生输入框点击事件
		onNavigationBarSearchInputClicked() {
			// 在 /common/mixin/mixin.js 中定义了,main.js全局引入了
			uni.navigateTo({
				url: '/pages/search/search'
			});
		},
		methods: {
			navTos(){
				console.log("1111");
				uni.navigateTo({
					url: '/pages/search/search'
				});
			},
			// 轮播图数据
			async loadBannerData() {
				// 不要少了 await, 位置1的广告
				const {
					data
				} = await api.getAdvertList(1)
				this.bannerList = data
			}, //不要少了逗号

			// 分类数据
			async loadCateData() {
				// 加载分类信息, 不要少了 await, 
				const {
					data
				} = await api.getCategoryList()
				this.categoryList = data
			}, //不要少了逗号

			async loadHotCourseData() {
				// 热门推荐, 只要查询第1页，8条即可
				const {
					data
				} = await api.getList({
					sort: 'hot'
				}, 1, 8)
				// 注意：数据在 records 中
				this.hotCourseList = data.records
				console.log(this.hotCourseList);
				// console.log('hotCourseList', this.hotCourseList)
			}, //不要少了逗号

			async loadNewCourseData() {
				// 近期上新, 只要查询第1页，8条即可
				const {
					data
				} = await api.getList({
					sort: 'new'
				}, 1, 8)
				// 注意：数据在 records 中
				this.newCourseList = data.records
				// console.log('newCourseList', this.newCourseList)
			}, //不要少了逗号

			async loadFreeCourseData() {
				// 免费精选, 只要查询第1页，10条即可。isFree是否免费：0收费，1免费
				const {
					data
				} = await api.getList({
					isFree: 1
				}, 1, 10)
				// 注意：数据在 records 中
				this.freeCourseList = data.records
				// console.log('freeCourseList', this.freeCourseList)
			},

			async loadPayCourseData() {
				// 付费精品 带分页功能,isFree是否免费：0收费，1免费
				const {
					data
				} = await api.getList({
					isFree: 0
				})
				this.payCourseList = data.records
				// console.log('payCourseList', this.payCourseList)
			}

		},
	}
</script>
<style>
	.search-1 {
		position: fixed;
		width: 100%;
		top: 0x;
		z-index: 9;
	}
</style>
